<template>
	<view class="content">
		<view class="banner">
			<image src="https://qzy6.oss-cn-shenzhen.aliyuncs.com/appletAssets/banner.png" mode="widthFix"></image>
		</view>
		<view class="projectBox">
			<!-- <view class="projectItem huazhi">
				<view class="projectItemBody ">
					<view class="h1h2Box">
						<text class="h1">画质修复</text>
						<text class="h2">图片视频都能修，高清质感拉满</text>
					</view>
					<view class="zhezhao"></view>
					<button class="btn" @click="goto('huazhi')">立即使用</button>
				</view>
			</view>
			<view class="projectItem shangse" >
				<view class="projectItemBody" >
					<view class="h1h2Box">
					<text class="h1">照片上色</text>
					<text class="h2">将旧黑白照片画质提高并添加色彩</text>
					</view>
					<view class="zhezhao"></view>
					<button class="btn" @click="goto('shangse')" style="background-color: #00BF6C;">立即使用</button>
				</view>

			</view>
			<view class="projectItem lvyou" >
				<view class="projectItemBody">
					<view class="h1h2Box">
					<text class="h1">云旅游</text>
					<text class="h2">将照片中的人物取代成目标的境地</text>
					</view>
					<view class="zhezhao"></view>
					<button class="btn" @click="goto('lvyou')" style="background-color: #1F7EFF;">立即使用</button>
				</view>
			</view>
			<view class="projectItem niantu" >
				<view class="projectItemBody">
					<view class="h1h2Box">
					<text class="h1">照片黏土风</text>
					<text class="h2">将照片一键转化为黏土风</text>
					</view>
					<view class="zhezhao"></view>
					<button class="btn" @click="goto('niantu')" style="background-color: #FA7C24;">立即使用</button>
				</view>
			</view> -->
			<view v-for="(item,index) in playGroup" :class="playGroup.length%2==1&&index==playGroup.length-1?'projectItem1 ':'projectItem '+item.url" style="background-color: aqua;">
				<view class="projectItemBody ">
					<view :class="playGroup.length%2==1&&index==playGroup.length-1?'textBox':'h1h2Box'">
						<text class="h1">{{item.title}}</text>
						<text class="h2">{{item.titleText}}</text>
					</view>
					<view class="zhezhao"></view>
					<button class="btn" :style="'background-color:'+ item.color+';'" @click="goto(index)">立即使用</button>
				</view>
			</view>
		</view>

		<Menu style="width: 110%;"></Menu>
	</view>
</template>

<script>
	import Menu from "../components/menu.vue"
	export default {
		components: {
			Menu
		},
		data() {
			return {
				title: 'Hello1',
				playGroup:[
					{url:'huazhi',fun:'changeBg',title:'背景更换',titleText:'一键切换背景，设计必备！',color:""},
					{url:'shangse',fun:'oldImg',title:'老照片复原',titleText:'将老旧照片画质提高并添加色彩',color:"#00BF6C"},
					{url:'lvyou',fun:'changeBg',title:'云旅游',titleText:'将照片中的人物取代成目标的境地',color:"#1F7EFF"},
					{url:'niantu',fun:'niantu',title:'照片黏土风',titleText:'图片视频都能修，高清质感拉满',color:"#FA7C24"},
					// {url:'5',title:'画质修复5',titleText:'图片视频都能修，高清质感拉满',color:"#AE22FF"},
				]
			}
		},
		onLoad() {
			//启动弹窗广告
			setTimeout(() => {
				// this.showTanAd()
			}, 1000)

			// 创建实例
			this.ad = tt.createRewardedVideoAd({
				adUnitId: "7y5va1nz0omqzzghuf",
			});

			// 监听错误
			this.ad.onError((err) => {
				tt.hideLoading();
				switch (err.errCode) {
					case 1004:
						// 无合适的广告
						break;
					default:
						// 更多请参考错误码文档
				}
			});

			// 监听视频播放完成
			this.ad.onClose((data) => {
				tt.hideLoading();
				if (data.isEnded) {
					console.log("观看了", data.count, "个视频");
				} else {
					console.log("未观看完视频");
				}
			});

			// do other thing
			// 卸载 close 事件监听
			// this.ad.offClose(closeHandler);

			// 预加载资源
			this.ad.load();
		},
		methods: {
			//跳转
			goto(index){
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: 'adShow?img='+this.playGroup[index].url+"&title="+this.playGroup[index].title+"&text="+this.playGroup[index].titleText+"&fun="+this.playGroup[index].fun
				});
			},
			// 展示激励广告
			showJiLiAd() {
				tt.showLoading();
				this.ad.show();
			},
			//展示弹窗广告
			showTanAd() {
				const interstitialAd = tt.createInterstitialAd({
					adUnitId: "2z89wsxvupdvrts7d8",
				});

				interstitialAd
					.load()
					.then(() => {
						interstitialAd.show().then(() => {
							console.log("广告显示成功");
						}).catch((err) => {
							console.error("广告组件加载出现问题", err);
						});
					})
					.catch((err) => {
						console.log("adUnitId:2z89wsxvupdvrts7d8", err);
					})
			}
		}
	}
</script>

<style scoped>
	.projectBox .lvyou{
		background-image: url(https://qzy6.oss-cn-shenzhen.aliyuncs.com/appletAssets/lvyou.png);
		background-size: 100% 100%;
	}
	.projectBox .niantu{
		background-image: url(https://qzy6.oss-cn-shenzhen.aliyuncs.com/appletAssets/niantu.png);
		background-size: 100% 100%;
	}
	.projectBox .huazhi{
		background-image: url(https://qzy6.oss-cn-shenzhen.aliyuncs.com/appletAssets/huazhi.png);
		background-size: 100% 100%;
	}
	.projectBox .shangse{
		background-image: url(https://qzy6.oss-cn-shenzhen.aliyuncs.com/appletAssets/shangse.png);
		background-size: 100% 100%;
	}
	.btn{
		height: 34px;
		display: block;
		font-weight: 400;
		font-size: 13px;
		color: #FFFFFF;
		background: #EF0E98;
		border-radius: 5px;
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
		bottom:10px;
	}
	.h1h2Box{
		position: absolute;
		z-index: 100;
		opacity: 1;
	}
	.h2{
		margin: 5px 0 0 5px;
		font-weight: 400;
		font-size: 10px;
		line-height: 10px;
		color: #FFFFFF;
	}
	.h1{
		z-index: 100;
		margin: 15px 0 0 5px;
		display: block;
		font-weight: 400;
		font-size: 17px;		
		line-height: 10px;
		color: #FFFFFF;
	}
	.projectItemBody {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
	}
	.zhezhao{
		width: 100%;
		height: 30%;
		position: absolute;
		background: linear-gradient(0deg, rgba(0,0,0,0), #000000);
		opacity: 0.5;
	}

	.projectItem {
		position: relative;
		width: 49%;
		border-radius: 5px;
		margin-top: 10px;
		position: relative;
		display: inline-block;
		background-color: beige;
	}

	.projectItem::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
	.projectItem1 .textBox{
		position: absolute;
		right: 10px;
		z-index: 10;
	}

	.projectItem1 .btn{
		width: 150px;
		height: 34px;
		background: #AE22FF;
		border-radius: 5px;
		right: 10px;
		left: unset;
		transform: unset;
		bottom: 10px;
	}
	.projectItem1 {
		position: relative;
		width: 100%;
		border-radius: 5px;
		margin-top: 10px;
		position: relative;
		display: inline-block;
		border-radius: 5px 5px 0px 0px;
	}
	
	.projectItem1::before {
		content: "";
		display: block;
		padding-top: 30%;
	}

	.projectBox {
		overflow-y: auto;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
		background-color: #000000;
		height: calc(100% - 154px - 60px);
	}
	.banner image{
		width: 100%;
	}

	.banner {
		width: 100%;
		height: 154px;
		overflow: hidden;
		text-align: center;
		line-height: 100px;
	}

	.content {
		background-color: #000000;
		padding: 20px 10px;
		box-sizing: border-box;
		height: 100vh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>